<template>
  <div class="index" v-loading="loading">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 任务行业查询 start -->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.username"
            placeholder="企业账号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.wordsId"
            placeholder="话术编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="日期选择">
          <el-date-picker
            v-model="checkTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#d9d9d9',
          color: 'rgb(16, 116, 253)',
        }">
        <el-table-column prop="username" label="企业账号" align="center"> </el-table-column>
        <el-table-column prop="wordsId" label="话术编号" align="center"> </el-table-column>
        <el-table-column prop="wordsName" label="话术名称" align="center"> </el-table-column>
        <el-table-column prop="contents" label="话术内容" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.contents" :key="index">{{item}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="建立时间" align="center"> </el-table-column>
        <el-table-column prop="enabled" label="使用状态" align="center">
          <template slot-scope="scope">
            <div :class="scope.row.enabled = 1 ? 'openStatus' : 'banStatus'">{{scope.row.enabled = 1 ? '启用' : '禁用'}}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="formInline.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        style="text-align: center; margin-top: 20px"
      >
      </el-pagination>
    </el-card>
    <!-- 任务行业查询 end -->
  </div>
</template>

<script>
  import ModuleTitle from "@/components/content/ModuleTitle.vue";

  // import { createSign } from "@/utils/sign";
  import API from "@/network/api/smsApi";
  import moment from "moment";
  export default {
    name: "index",
    data() {
      return {
        checkTime: [],
        moduleTitle: "话术审核",
        formInline: {
          username: "",
          wordsId: "",
          startTime: "",
          endTime: "",
          pageNum: 1,
          pageSize: 10,
        },
        tableData: [],
        dataRow: null,
        total: 0,
        loading: false,
      };
    },
    created() {

      this.orderList();
    },
    watch: {
      checkTime() {
        console.log(this.checkTime)
        if (this.checkTime === null) {
          this.checkTime = [];
        }
        if (this.checkTime.length !== 0) {
          this.formInline.startTime = this.checkTime[0]
          this.formInline.endTime = this.checkTime[1]
        }
        //   this.emsFindQueryForm.createTimeQ = Number(
        //     moment(this.checkTime[0].getTime()).format("x")
        //   );
        //   this.emsFindQueryForm.createTimeH = Number(
        //     moment(this.checkTime[1].getTime()).format("x")
        //   );
        //   this.authDetailPage.createTimeQ = Number(
        //     moment(this.checkTime[0].getTime()).format("x")
        //   );
        //   this.authDetailPage.createTimeH = Number(
        //     moment(this.checkTime[1].getTime()).format("x")
        //   );
        // } else {
        //   this.emsFindQueryForm.createTimeQ = "";
        //   this.emsFindQueryForm.createTimeH = "";
        //   this.authDetailPage.createTimeQ = "";
        //   this.authDetailPage.createTimeH = "";
        // }
      }
    },
    methods: {
      onSubmit() {
        console.log("submit!");
        this.orderQuery()
      },
      orderQuery () {
        console.log(this.formInline.orderName);
        console.log(this.formInline);
        API.queryAllWords(this.formInline).then(res => {
          console.log(res)
          this.tableData = res.data.data.records
          this.tableData.forEach(item => {
            item.contents = item.contents.split('%&*$*&%')
            console.log(item.contents, 'item.contents')
          })
          this.total = res.data.data.total;
        })
      },
      onReset() {
        this.formInline.username = "";
        this.formInline.wordsId = "";
        this.formInline.startTime = "";
        this.formInline.endTime = "";
        this.checkTime = [];
        this.orderList();
      },
      orderList() {
        this.loading = true;
        API.queryAllWords(this.formInline).then((res) => {
          console.log(res, 'sadawsdasdasd');
          if (res.data.code === 0) {
            this.tableData = res.data.data.records;
            this.tableData.forEach(item => {
              item.contents = item.contents.split('%&*$*&%')
              console.log(item.contents, 'item.contents')
            })
            this.total = res.data.data.total;
          }
          this.loading = false;
        });
      },
      handleCurrentChange(val) {
        console.log(val);
        this.formInline.pageNum = val;
        this.orderList();
      }
    },
    components: { ModuleTitle },
  };
</script>

<style lang="css">
  .el-tooltip__popper{font-size: 14px; max-width:50% }
  .openStatus {
    color: #008000;
  }
  .banStatus {
    color: red
  }
  .card-title {
    color: #1074fd;
    font-size: 18px;
    margin-bottom: 14px;
  }

  /* 任务行业查询 */
  .trade-query-label {
    color: #1a1a1a;
    font-size: 18px;
  }
  .trade-query-input {
    width: 225px;
    height: 44px;
    margin-left: 10px;
    margin-right: 30px;
  }
  .trade-query-button {
    width: 64px;
    height: 40px;
    padding: 0;
    border-width: 0;
    background-color: #1074fd;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
  }

  /* 任务行业列表 */
  .list {
    position: relative;
    width: 48%;
    height: 356px;
    border: 1px solid #d9d9d9;
  }
  .list-header {
    display: flex;
    height: 50px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
    line-height: 50px;
  }
  .list-body {
    display: flex;
    height: 51px;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
    line-height: 50px;
  }
  .add-button {
    background-color: #1074fd;
    color: #ffffff;
    border: 1px solid #1074fd;
  }
  .stand-center {
    width: 100% !important;
  }
  .noneList {
    position: relative;
    width: 100%;
    height: 356px;
    margin: 0 auto 40px;
    text-align: center;
    line-height: 356px;
    font-size: 30px;
  }
</style>
